<template>
	<view class="content-list">
		<scroll-view class="scroll-view_list" scroll-y="true">
			<view class="mian_content">
				<view class="c_item" v-if="orderDetail">
					<view class="sty_title">
						<p class="workNo">
							{{ orderDetail.workNo }}
							<image
								class="btn_c"
								@click="copy(orderDetail.workNo)"
								src="/static/copy.svg"
								mode=""
							></image>
						</p>
						<span
							class="status"
							:class="
								orderDetail.status == 1 || orderDetail.status == 2
									? 'status_123'
									: orderDetail.status == 3
									? 'status_4'
									: orderDetail.status == 5
									? 'status_6'
									: ''
							"
						>
							{{
								orderDetail.status == 1
									? '待派单'
									: orderDetail.status == 2
									? '待网点确认'
									: orderDetail.status == 3
									? '处理中'
									: orderDetail.status == 4
									? '已完成'
									: '已取消'
							}}
						</span>
					</view>
					<view class="module_level">
						<p class="module">{{ orderDetail.module }}</p>
						<p class="level" :style="`color: ${orderDetail.levelColor};`">
							{{ orderDetail.level }}
						</p>
					</view>
					<view class="tip_title">
						<view class="title_span">
							<span class="tip">报单时间：</span>
							<span>{{ orderDetail.createTime }}</span>
						</view>
						<!-- 	<view class="title_span">
							<span class="tip">质保状态：</span><span>{{orderDetail.overinsured?'过保':'在保'}}</span>
						</view> -->
						<view class="title_span" v-if="orderDetail.status == 4">
							<span class="tip">工单质保：</span>
							<span>{{ orderDetail.warrantyDay }}天</span>
						</view>
						<view class="title_span">
							<span class="tip">客户期望上门：</span>
							<span>
								{{ orderDetail.expectedDate }}&nbsp;{{
									orderDetail.expectedStartTime
								}}~{{ orderDetail.expectedEndTime }}
							</span>
						</view>
						<template v-if="orderDetail.status == 2 || orderDetail.status == 3">
							<view class="title_span">
								<span class="tip">工程师预约时间：</span>
								<span v-if="orderDetail.reservationDate">
									{{ orderDetail.reservationDate }}&nbsp;{{
										orderDetail.reservationStartTime
									}}~{{ orderDetail.reservationEndTime }}
								</span>
							</view>
							<!-- <view class="title_span">
									<span class="tip">签到时间：</span><span>{{orderDetail.engineerServiceTime}}</span>
								</view> -->
						</template>
						<template v-if="orderDetail.status == 4 || orderDetail.status == 5">
							<view class="title_span">
								<span class="tip">完成时间：</span>
								<span>{{ orderDetail.endTime }}</span>
							</view>
						</template>
					</view>
					<view class="btn_change">
						<button
							size="mini"
							hover-class="btn_green-hover"
							class="btn_green"
							@click="onGreen()"
							v-if="orderDetail.status == 4 || orderDetail.status == 5"
						>
							再次申请
						</button>
						<template v-if="orderDetail.status != 5">
							<!-- 	<button hover-class="btn_again-hover" size="mini" @click="openCancel('cancel')"
								v-if="orderDetail.status!=4" class="btn_again">取消服务</button> -->
							<button
								size="mini"
								hover-class="btn_title-hover"
								@click="openCancel('time')"
								class="btn_title"
								v-if="orderDetail.status != 4"
							>
								改约日期
							</button>
							<button
								size="mini"
								hover-class="btn_title-hover"
								@click="serviceFun()"
								v-if="orderDetail.status == 4"
								class="btn_title"
							>
								服务评价
							</button>
						</template>
					</view>
				</view>

				<!-- 商品信息 -->
				<view class="c_item_">
					<view class="segmented-control">
						<view
							class="segmented-control__text"
							:class="{'segmented-control__item--text': current == index}"
							v-for="(item, index) in items"
							:key="index"
							@click="onClickItem(index)"
						>
							<span>{{ item }}</span>
						</view>
					</view>
					<!-- 商品信息 -->
					<view class="goods_info" v-if="current == 0 && goodsDetail">
						<view
							v-for="(item, index) in goodsDetail"
							:key="index"
							class="item_li"
						>
							<view class="conent">
								<view class="left_img">
									<image
										v-if="item.goodsImage"
										@click="lookImg([item.goodsImage])"
										class="img"
										lazy-load
										:src="item.goodsImage"
										mode="aspectFill"
									></image>
									<uni-icons
										color="#aae"
										size="48"
										v-else
										type="image"
									></uni-icons>
								</view>
								<view class="right_text">
									<view class="top_brand_type">
										{{ item.goodsName }}
									</view>
									<view class="pt">
										<span class="tip">型号：</span>
										<view class="lis">
											{{ item.goodsModel }}
										</view>
									</view>
									<view class="pt">
										<span class="tip">规格：</span>
										<view class="lis">
											{{ item.goodsSpecName }}
										</view>
									</view>
									<view class="pt">
										<span class="tip">一物一码：</span>
										<view class="lis">
											{{ item.codes[0] }}
										</view>
										<view
											class="num_b"
											@click="showGoodsCode(item)"
											v-if="item.codes.length!>1"
										>
											<span class="num_text">
												{{ item.codes.length > 99 ? '99+' : item.codes.length }}
											</span>
											<uni-icons type="right" size="14"></uni-icons>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 工单信息 -->
					<view class="order_info" v-show="current == 1" v-if="orderDetailInfo">
						<view class="img_list">
							<view
								v-for="(item, index) in orderDetailInfo.images"
								@click="lookImg(orderDetailInfo.images)"
								class="img_item"
								:key="index"
							>
								<image :src="item" mode="aspectFill" class="img"></image>
							</view>
						</view>
						<view class="title_content">
							<text class="text">工单描述：</text>
							<span class="cont">{{ orderDetailInfo.content }}</span>
						</view>
						<view
							v-for="(item, index) in orderDetailInfo.orderCustomFields"
							:key="index"
						>
							<view class="title_content">
								<view class="text">{{ item.name }}：</view>
								<view
									class="cont"
									v-if="
										item.type == 1 ||
										item.type == 2 ||
										item.type == 3 ||
										item.type == 4
									"
								>
									{{ item.val.join('、') }}
								</view>
								<view class="cont" v-if="item.type == 5">
									<image
										:src="img"
										mode="aspectFill"
										class="cont_img"
										v-for="(img, index) in item.val"
										:key="index"
										@click="lookImg(item.val, index)"
									></image>
								</view>
								<view class="cont" v-if="item.type == 6">
									<view
										class="pdf_sty"
										v-for="(url, index) in item.val"
										:key="index"
										@click="lookPDF(url)"
									>
										PDF
									</view>
								</view>
								<view class="cont" v-if="item.type == 7">
									<video
										:src="url"
										mode="aspectFill"
										class="cont_img"
										v-for="(url, index) in item.val"
										@click="videoUrlShow(url)"
										:key="index"
										:controls="false"
										:enable-progress-gesture="false"
										:show-center-play-btn="false"
									></video>
								</view>
								<!-- 评分8 -->
								<view class="cont" v-if="item.type === 8">
									<uni-rate
										:readonly="true"
										:value="Number(item.val.join()) / 2"
										margin="10"
									/>
								</view>
							</view>
						</view>
					</view>
					<!-- 服务商信息 -->
					<view
						class="network_content"
						v-show="current == 2"
						v-if="networkInfo"
					>
						<view class="n_tip">
							<text class="text">服务商：</text>
							<span class="cont">{{ networkInfo.network }}</span>
						</view>
						<view class="n_tip">
							<text class="text">工程师信息：</text>
							<span class="cont">
								{{ networkInfo.engineerName }}&nbsp;{{
									networkInfo.engineerPhone
								}}
							</span>
						</view>
						<!-- <view class="n_tip">
							<text class="text">协同人信息：</text><span class="cont">{{networkInfo.cooperateEngineer?networkInfo.cooperateEngineer.join()}}</span>
						</view> -->
					</view>
					<!-- 客户信息 -->
					<view class="network_content" v-show="current == 3" v-if="userInfo">
						<view class="n_tip">
							<text class="text">客户名称：</text>
							<span class="cont">{{ userInfo.name }}</span>
						</view>
						<view class="n_tip">
							<text class="text">客户电话：</text>
							<span class="cont">
								{{ userInfo.phone }}
								<uni-icons
									@click="makePhoneCall(userInfo.phone)"
									class="line_phone"
									size="12"
									color="#007cff"
									type="phone"
								></uni-icons>
							</span>
						</view>
						<view class="n_tip">
							<text class="text">客户地址：</text>
							<span class="cont">
								{{
									userInfo.province +
									userInfo.city +
									userInfo.area +
									userInfo.town +
									userInfo.address
								}}
							</span>
						</view>
					</view>
					<!-- <view class="network_content" v-show="current==4">
					</view> -->
				</view>

				<!-- 服务进度 -->
				<view class="c_item">
					<view class="top_label">服务进度</view>
					<view class="log_list">
						<view
							class="log_item"
							v-for="(item, index) in !lookShow
								? orderDetailLog.rows?.slice(0, 2)
								: orderDetailLog.rows"
							:key="index"
						>
							<uni-icons
								type="smallcircle"
								class="icon_item"
								size="20"
								:color="index == 0 ? '#007cff' : '#EAECEE'"
							></uni-icons>
							<view class="block_item">
								<view class="title_span">
									<p
										class="content_time"
										:style="{color: index == 0 ? '#000' : '#999'}"
									>
										{{ item.createTime }}
									</p>
									<p
										class="title"
										:style="{color: index == 0 ? '#007cff' : '#999'}"
									>
										{{
											'【' +
											item.type +
											'】' +
											item.createEmp +
											'&nbsp;' +
											item.name
										}}{{ item.event }}
									</p>
									<view
										class="content_text"
										:style="{color: index == 0 ? '#000' : '#999'}"
									>
										{{ item.content }}
									</view>
								</view>
							</view>
						</view>
						<span
							class="some_log"
							@click="onClickSome"
							v-if="
								orderDetailLog.total > orderDetailLog.rows.length && lookShow
							"
						>
							更多
						</span>
					</view>
					<view class="look_some" v-if="orderDetailLog.rows?.length > 2">
						<view v-show="lookShow" @click="lookShow = false">
							<uni-icons type="top"></uni-icons>
						</view>
						<view v-show="!lookShow" @click="lookShow = true">
							<uni-icons type="bottom"></uni-icons>
						</view>
					</view>
				</view>
				<view class="nav_bar" v-if="showTop" @click="sllTop">
					<uni-icons type="arrow-up" color="#fff"></uni-icons>
				</view>
			</view>
		</scroll-view>
		<TimePopup
			ref="timeRef"
			@set-popup="showpopup = $event"
			:showpopup="showpopup"
			:workId="workId"
		></TimePopup>
		<!-- 取消弹窗 -->
		<uni-popup ref="popupCancel" type="dialog">
			<uni-popup-dialog
				type="warning"
				cancelText="否"
				confirmText="是"
				title="提示"
				content="确定要取消该服务?"
				@confirm="dialogConfirm"
				@close="dialogClose"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 商品一物一码列表弹窗 -->
		<uni-popup ref="popupGoodsCode" type="bottom">
			<view class="popup_list" v-if="goodsList">
				<view class="text_top_popup">
					<span>当前商品一物一码列表（{{ goodsList?.codes.length }}）</span>
					<uni-icons
						color="#aaa"
						@click="popupGoodsCode.close()"
						size="22"
						type="closeempty"
					></uni-icons>
				</view>
				<view class="height_list">
					<view class="left_img">
						<image
							v-if="goodsList.goodsImage"
							@click="lookImg([goodsList.goodsImage])"
							class="img"
							lazy-load
							:src="goodsList.goodsImage"
							mode="aspectFill"
						></image>
						<uni-icons color="#aae" size="48" v-else type="image"></uni-icons>
					</view>
					<view class="right_text">
						<view class="top_brand_type">
							{{ goodsList.goodsName }}
						</view>
						<view class="ms">
							<p class="tip">型号：</p>
							<p class="lis">{{ goodsList.goodsModel }}</p>
						</view>
						<view class="ms">
							<p class="tip">规格：</p>
							<p class="lis">{{ goodsList.goodsSpecName }}</p>
						</view>
					</view>
				</view>
				<view class="list_ovh">
					<uni-list-item
						v-for="(item, index) in goodsList?.codes"
						clickable
						:key="index"
					>
						<template v-slot:body>
							<view class="way_name" @click="copy(item)">
								<span>{{ index + 1 }}.&nbsp;&nbsp;{{ item }}</span>
								<image class="img" src="/static/copy.svg" mode=""></image>
							</view>
						</template>
					</uni-list-item>
				</view>
			</view>
		</uni-popup>
		<!-- 弹出申请方式-->
		<wayType
			ref="wayTypeRef"
			@value-change="addWorkor"
			:showpopup="showBottom"
		></wayType>
		<uni-popup
			ref="popupvideoRef"
			background-color="#fff"
			@change="urlClickShow"
		>
			<video
				:src="videoUrl"
				:enable-progress-gesture="false"
				:show-center-play-btn="false"
			></video>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import {ref, watch} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onUnload,
	} from '@dcloudio/uni-app';
	import apiOrder from '@/util/api/order.js';
	import TimePopup from '@/components/u-user/TimePopup.vue';
	import store from '@/store/index.js';
	import _ from 'lodash';
	import wayType from '@/components/u-user/wayType.vue';
	const orderDetail = ref(null); //详情信息
	const orderDetailLog = ref({rows: [], total: 0}); //详情信息进度
	const goodsDetail = ref(null); //商品详情
	const orderDetailInfo = ref(null); //工单信息
	const networkInfo = ref(null); //服务商信息
	const userInfo = ref(null); //客户
	const lookShow = ref(false); //展开
	const current = ref(0);
	const workId = ref(''); //工单id
	const showTop = ref(false); //显示滚到按钮
	const timeRef = ref();
	const showpopup = ref(false); //改约日期弹窗
	const popupCancel = ref(); //取消弹窗
	const popupGoodsCode = ref(); //商品编码展示
	const goodsList = ref();
	const items = ['工单商品', '工单信息', '服务商信息', '客户'];
	onLoad((e) => {
		workId.value = e.id;
		getOrderListDetail(e.id);
		OrderDetailServiceLog(e.id);
		OrderDetailGoodsInfo(e.id);
		uni.pageScrollTo({
			scrollTop: 0,
		});
	});
	onUnload(() => {
		uni.hideLoading();
	});
	const showBottom = ref(null); //申请工单弹窗
	// 选择申请方式
	const addWorkor = (item) => {
		store.commit('setWayType', {
			id: item.id,
			name: item.name,
			type: item.type, //1安装
		});
		showBottom.value = false;
		uni.navigateTo({
			url: '/pages_user/home/add?id=' + workId.value,
		});
	};
	const wayTypeRef = ref();
	// 进度分页
	const pageLog = ref({
		limit: 0,
		page: 1,
	});
	// 点击再次申请
	const onGreen = async () => {
		store.commit('setorderGoodsTypes', []);
		store.commit('setchackFaultList', []);
		store.commit('setchackFaultItem', {id: null});
		store.commit('setWayType', {});
		store.commit('setcheckBrandItem', {id: null});
		store.commit('setcheckClassifyItem', {id: null});
		store.commit('setappointmentTime', null);
		store.commit('setUserOrder', {
			address: '', //客户详细地址
			area: '', //地址-县/区
			city: '', //地址-市
			helpOtherCreateOrder: false, //	是否代他人建单：0-否，1-是
			name: '', //客户姓名
			otherPhone: '', //其他电话
			phone: '', //客户手机号
			province: '', //地址-省
			town: '', //地址-镇
			userId: null,
		});
		await wayTypeRef.value.open(0);
		showBottom.value = true;
	};
	onPullDownRefresh(async () => {
		pageLog.value.page = 1;
		await Promise.all([
			getOrderListDetail(workId.value),
			OrderDetailServiceLog(workId.value),
			OrderDetailGoodsInfo(workId.value),
		]).then(() => {
			uni.stopPullDownRefresh();
		});
	});
	// 0'商品信息', 1'工单信息', 2'服务商信息', 3'客户', 4'费用合计'
	const onClickItem = (index: number) => {
		current.value = index;
		switch (index) {
			case 0:
				OrderDetailGoodsInfo(workId.value);
				break;
			case 1:
				OrderDetailOrderInfo(workId.value);
				break;
			case 2:
				OrderDetailNetworkInfo(workId.value);
				break;
			case 3:
				OrderDetailUserInfo(workId.value);
				break;
			case 4:
				uni.showToast({
					title: '正在维护中，敬请期待...',
					duration: 2000,
					icon: 'none',
				});
				break;
		}
	};
	watch(showpopup, (n) => {
		if (n) {
		} else {
			if (!workId.value) return;
			getOrderListDetail(workId.value);
			OrderDetailServiceLog(workId.value);
		}
	});
	// 服务评价
	const serviceFun = () => {
		uni.showToast({
			title: '此功能，暂未开放',
			duration: 2000,
			icon: 'none',
		});
	};
	// 商品一物一码展示
	const showGoodsCode = (item) => {
		goodsList.value = item;
		popupGoodsCode.value.open();
	};
	// 复制
	const copy = (val: any) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'none',
				});
			},
		});
	};
	// 获取工单列表
	const getOrderListDetail = async (id) => {
		if (!id) return;
		uni.showLoading({
			mask: true,
			title: '加载中...',
		});
		await apiOrder.getOrderDetail(id).then((res) => {
			if (res.code == 20000) {
				orderDetail.value = res.data.row;
			}
		});
		uni.hideLoading();
	};
	// 打开取消弹窗
	const openCancel = (type) => {
		if (type == 'cancel') {
			popupCancel.value.open();
		}
		if (type == 'time') {
			showpopup.value = true;
		}
	};
	// 关闭取消弹窗
	const dialogClose = () => {
		popupCancel.value.close();
	};
	// 点击查看更多
	const onClickSome = _.debounce(() => {
		pageLog.value.page += 1;
		OrderDetailServiceLog(workId.value);
	}, 800);
	//详情信息进度
	const OrderDetailServiceLog = async (id) => {
		if (!id) return;
		uni.showLoading({
			title: '加载中...',
		});
		await apiOrder.getOrderDetailServiceLog(pageLog.value, id).then((res) => {
			if (res.code == 20000) {
				if (pageLog.value.page > 1) {
					orderDetailLog.value.rows = [
						...orderDetailLog.value.rows,
						...res.data.rows,
					];
				} else {
					orderDetailLog.value.rows = res.data.rows;
				}
				orderDetailLog.value.total = res.data.total;
			}
		});
		uni.hideLoading();
	};
	// 确认取消工单
	const dialogConfirm = () => {
		if (!workId.value) return;
		apiOrder.cancelOrder(workId.value).then((res) => {
			if (res.code == 20000) {
				uni.showToast({
					icon: 'success',
					title: res.message,
				});
				getOrderListDetail(workId.value);
				OrderDetailServiceLog(workId.value);
			}
		});
	};
	//获取商品信息
	const OrderDetailGoodsInfo = async (id) => {
		if (!id) return;
		uni.showLoading({
			title: '加载中...',
		});
		await apiOrder.getOrderDetailGoodsInfo(id).then((res) => {
			if (res.code == 20000) {
				goodsDetail.value = res.data.row;
				goodsDetail.value = goodsDetail.value.map((o) => {
					o.lookShow = false;
					return o;
				});
			}
		});
		uni.hideLoading();
	};
	// 调起拨打电话的功能
	const makePhoneCall = (phoneNumber) => {
		uni.makePhoneCall({
			phoneNumber: phoneNumber,
		});
	};
	// 查看附件
	const lookPDF = (url) => {
		uni.openDocument({
			filePath: url,
			fileType: 'pdf',
			success: function (res) {},
			fail: function (err) {
				uni.showToast({
					icon: 'none',
					title: err,
				});
			},
		});
	};
	// 查看视频
	const popupvideoRef = ref();
	const videoUrl = ref('');
	const videoUrlShow = (url) => {
		videoUrl.value = url;
		popupvideoRef.value.open();
	};
	const urlClickShow = (v) => {
		if (!v.show) videoUrl.value = '';
	};
	// 工单信息
	const OrderDetailOrderInfo = async (id) => {
		if (!id) return;
		uni.showLoading({
			mask: true,
			title: '加载中...',
		});
		await apiOrder.getOrderDetailOrderInfo(id).then((res) => {
			if (res.code == 20000) {
				orderDetailInfo.value = res.data.row;
			}
		});
		uni.hideLoading();
	};
	// 服务商信息
	const OrderDetailNetworkInfo = async (id) => {
		if (!id) return;
		uni.showLoading({
			mask: true,
			title: '加载中...',
		});
		await apiOrder.getOrderDetailNetworkInfo(id).then((res) => {
			if (res.code == 20000) {
				networkInfo.value = res.data.row;
			}
		});
		uni.hideLoading();
	};
	// 服务商信息
	const OrderDetailUserInfo = async (id) => {
		if (!id) return;
		uni.showLoading({
			mask: true,
			title: '加载中...',
		});
		await apiOrder.getOrderDetailUserInfo(id).then((res) => {
			if (res.code == 20000) {
				userInfo.value = res.data.row;
			}
		});
		uni.hideLoading();
	};
	// 预览图片
	const lookImg = (urls, num = 0) => {
		uni.previewImage({
			urls: urls,
			current: num,
		});
	};
	// 获取滚到位置
	onPageScroll((e) => {
		if (e.scrollTop > 280) {
			showTop.value = true;
		} else if (e.scrollTop < 280) {
			showTop.value = false;
		}
	});
	// 回到顶部
	const sllTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 100,
		});
	};
</script>

<style lang="scss" scoped>
	.popup_way {
		height: 60vh;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		padding-bottom: 100rpx;

		.text_top_popup {
			text-align: center;
			font-size: 32rpx;
			padding: 20rpx 0;
			font-weight: bold;

			.icon {
				position: absolute;
				right: 40rpx;
				font-weight: 500;
			}
		}

		.height_list {
			height: 100%;
			overflow: auto;

			.way_name {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
			}
		}
	}

	.content-list {
		background-color: #f6f7fa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		overflow-y: hidden;
		display: flex;
		flex-direction: column;

		.scroll-view_list {
			height: 100%;
			flex: 1;

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			.mian_content {
				padding-bottom: 100rpx;
			}
		}

		.nav_bar {
			position: fixed;
			right: 24rpx;
			bottom: 30vh;
			width: 30rpx;
			height: 30rpx;
			background-color: rgba(0, 0, 0, 0.6);
			border-radius: 50%;
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.c_item {
			background-color: #fff;
			margin: 24rpx;
			padding: 24rpx 20rpx 12rpx;
			border-radius: 10rpx;
			box-sizing: border-box;

			.sty_title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.status {
					font-size: 22rpx;
					background-color: #f2f9ff;
					color: #007cff;
					padding: 8rpx;
					border-radius: 4rpx;
				}

				.status_123 {
					color: #e6a23c;
					background-color: #fdf6ec;
				}

				.status_4 {
					color: #00c0c0;
					background-color: #f2ffff;
				}

				.status_6 {
					color: #909399;
					background-color: #f4f4f5;
				}

				.workNo {
					font-size: 28rpx;
					display: flex;
					align-items: center;

					.btn_c {
						height: 30rpx;
						line-height: 30rpx;
						width: 24rpx;
						margin-left: 24rpx;
					}
				}
			}

			.module_level {
				display: flex;
				align-items: center;
				padding: 12rpx 0 16rpx;

				.module {
					font-size: 28rpx;
					// color: #666;
					font-weight: bold;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					word-wrap: break-word;
					word-break: break-all;
				}

				.level {
					font-size: 24rpx;
					color: #666;
					margin: 0 24rpx;
				}
			}

			.tip_title {
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				row-gap: 12rpx;

				.title_span {
					// color: #666;
					.tip {
						color: #777;
						font-size: 24rpx;
					}
				}
			}

			.btn_change {
				text-align: right;
				padding-top: 12rpx;

				.btn_green {
					background-color: #fff;
					padding: 0 12rpx;
					color: #00c0c0;
					font-size: 24rpx;
					margin-left: 24rpx;
				}

				.btn_green-hover {
					background-color: #00c0c02b;
				}

				.btn_again {
					background-color: #fff;
					padding: 0 12rpx;
					color: #666;
					font-size: 24rpx;
					margin-left: 24rpx;
				}

				.btn_again-hover {
					background-color: #6666662b;
				}

				.btn_title {
					background-color: #fff;
					padding: 0 12rpx;
					color: #007cff;
					font-size: 24rpx;
					margin-left: 24rpx;
					box-sizing: border-box;
				}

				uni-button:after {
					height: 196%;
				}

				.btn_title-hover {
					background-color: #007cff2b;
				}
			}
		}

		.c_item {
			.top_label {
				border-left: 6rpx solid #007cff;
				padding-left: 12rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.look_some {
				text-align: center;
			}

			.log_list {
				padding: 40rpx 24rpx 0;

				.log_item {
					position: relative;
					border-left: 4rpx dashed #eaecee;

					&:last-child {
						border-left: 4rpx dashed transparent;
					}

					.icon_item {
						position: absolute;
						left: -22rpx;
						top: -5rpx;
						z-index: 2;
					}

					.block_item {
						padding: 0 0 40rpx 24rpx;

						.title_span {
							.title {
								display: flex;
								align-items: center;
								flex-wrap: wrap;
								font-size: 28rpx;
								color: #007cff;
							}

							.content_text {
								display: flex;
								align-items: center;
								flex-wrap: wrap;
								font-size: 24rpx;
								text-indent: 0.5em;
								margin-top: 12rpx;
							}

							.content_time {
								font-size: 24rpx;
								text-indent: 0.5em;
								margin: 0rpx 0 12rpx;
							}
						}
					}
				}

				.some_log {
					font-size: 28rpx;
					color: #007cff;
				}
			}
		}

		.c_item_ {
			background-color: #fff;
			margin: 24rpx;
			padding: 24rpx 20rpx;
			border-radius: 10rpx;

			:deep(.segmented-control) {
				border-bottom: 1rpx solid #eee;
				display: flex;
				justify-content: space-between;

				.segmented-control__text {
					font-size: 28rpx !important;
					font-weight: bold;
					border-bottom: 4rpx solid transparent;
					padding: 10rpx;
					position: relative;
				}

				.segmented-control__item--text {
					border-bottom: 4rpx solid #007cff;
					padding: 10rpx;
					color: #007cff;
					transition: all 0.5s;
				}
			}

			.goods_info {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				margin: 20rpx 0 0;

				.item_li {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					position: relative;
					border: 1px solid #eee;
					padding: 20rpx;

					.conent {
						display: flex;
						// align-items: center;
						width: 100%;

						.left_img {
							width: 160rpx;
							height: 160rpx;
							border: 1px solid #eee;
							border-radius: 4rpx;
							margin: 0 20rpx 0 0;

							.img {
								width: 100%;
								height: 100%;
								border-radius: 4rpx;
							}
						}

						.right_text {
							font-size: 24rpx;
							margin-right: 12rpx;
							flex: 1;
							position: relative;

							.brands {
								font-weight: bold;
								font-size: 28rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
							}

							.top_brand_type {
								font-size: 28rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
								color: #000;
								font-weight: bold;
							}

							.pt {
								margin-top: 10rpx;
								display: flex;
								flex-wrap: wrap;
								word-wrap: break-word;
								word-break: break-all;
								width: 100%;

								.num_b {
									position: absolute;
									right: -14rpx;
									color: #fff;
									border-radius: 6rpx;

									.num_text {
										background-color: #007cff;
										border-radius: 4rpx;
										padding: 0 8rpx;
										font-size: 22rpx;
									}
								}

								.tip {
									color: #777;
								}

								.lis {
									flex: 1;
									word-wrap: break-word;
									word-break: break-all;
								}
							}

							.look_some {
								text-align: center;
							}
						}
					}
				}
			}

			.order_info {
				min-height: 230rpx;
				display: flex;
				flex-direction: column;
				row-gap: 10rpx;

				.img_list {
					display: flex;
					align-items: center;
					width: 100%;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.img_item {
						width: calc(20% - 32rpx);
						margin: 16rpx;
						width: 120rpx;
						height: 120rpx;
						border: 1px solid #eee;

						.img {
							width: 120rpx;
							height: 120rpx;
						}
					}
				}

				.title_content {
					display: flex;
					margin: 0 12rpx;

					.text {
						font-size: 28rpx;
						color: #777;
					}

					.cont {
						font-size: 28rpx;

						white-space: pre-wrap;
						word-wrap: break-word;
						word-break: break-all;
						flex: 1;
					}

					.cont_img {
						width: 80rpx;
						height: 80rpx;
						margin: 0 8rpx 16rpx;
						box-shadow: 0 0 2rpx 2rpx #e8e8e8;
					}

					.pdf_sty {
						background-color: rgb(250, 81, 81);
						width: 80rpx;
						height: 80rpx;
						color: #fff;
						text-align: center;
						font-size: 22rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 12rpx;
						margin-bottom: 12rpx;

						&:before {
							content: '';
							position: absolute;
							z-index: 2;
							border: 12rpx solid #0000002b;
							right: 0rpx;
							top: 0rpx;
							border-top: 12rpx solid #fff;
							border-right: 12rpx solid #fff;
						}
					}
				}
			}

			.network_content {
				margin: 20rpx 12rpx 0;
				min-height: 230rpx;

				.n_tip {
					margin-top: 12rpx;
					display: flex;

					.text {
						font-size: 28rpx;
						color: #777;
					}

					.line_phone {
						border: 2rpx solid #007cff;
						width: 20rpx;
						height: 20rpx;
						line-height: 20rpx;
						border-radius: 50%;
						margin-left: 30rpx;
						padding: 4rpx;
					}

					.cont {
						font-size: 28rpx;
						white-space: pre-wrap;
						word-wrap: break-word;
						word-break: break-all;
						display: flex;
						align-items: center;
						flex: 1;
					}
				}
			}
		}

		.popup_list {
			padding: 0 24rpx;
			height: 70vh;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;

			.text_top_popup {
				text-align: center;
				font-size: 28rpx;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.height_list {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.left_img {
					width: 180rpx;
					height: 180rpx;
					border: 1px solid #eee;
					border-radius: 4rpx;
					margin: 0 20rpx 0 0;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 4rpx;
					}
				}

				.right_text {
					font-size: 24rpx;
					margin-right: 12rpx;
					flex: 1;
					position: relative;

					.brands {
						word-wrap: break-word;
						word-break: break-all;
						font-weight: bold;
						font-size: 28rpx;
						margin: 0 0 10rpx;
					}

					.top_brand_type {
						font-size: 28rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-wrap: break-word;
						word-break: break-all;
						margin: 10rpx;
						color: #000;
						font-weight: bold;
					}

					.ms {
						display: flex;
						width: 100%;
						word-wrap: break-word;
						word-break: break-all;
						margin: 8rpx;

						.tip {
							color: #777;
						}

						.lis {
							flex: 1;
							word-wrap: break-word;
							word-break: break-all;
						}
					}
				}
			}

			.list_ovh {
				height: 600rpx;
				overflow: auto;

				.way_name {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					width: 85%;

					.img {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		:deep(.uni-popup) {
			z-index: 999;
		}
	}
</style>
